<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr><th>标题</th><th>价格</th><th>销量</th></tr>
</table>
<script>
    //创建自定义对象
    //实例化一个空对象
    let p1 = {};
    //动态给对象添加属性和方法
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        //this访问的是当前对象
        console.log(this.name+":"+this.age);
    }
    //调用p1的run方法
    p1.run();
    //实例化一个自带属性和方法的对象
    let p2 = {
        name:"李四",
        age:20,
        run:function () {
            console.log(this.name+":"+this.age);
        }
    }
    //调用方法
    p2.run();

    //通过对象封装一个商品的信息
    let product = {title:"小米手机",price:3000,num:100};
    //通过数组装对象的形式 封装多个商品的信息
    let arr = [{title:"小米手机",price:3000,num:100},
        {title:"华为电视",price:2000,num:500},
        {title:"海尔洗衣机",price:1000,num:50}];
    //得到页面中的表格标签
    let table = document.querySelector("table");
    //遍历数组  for of  相当于Java中的新循环
    for (let p of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        //把商品的信息添加到td里面
        titleTd.innerText = p.title;
        priceTd.innerText = p.price;
        numTd.innerText = p.num;
        tr.append(titleTd,priceTd,numTd);
        //把tr装进table
        table.append(tr);
    }




</script>
</body>
</html>